<template>
  <HeaderComponent />
  <div class="main">
    <div class="main-contan">
      <!-- 搜索框 -->
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="search-box">
            <input
              type="text"
              v-model="searchQuery"
              placeholder="请输入搜索内容"
              @keyup.enter="handleSearch"
            />
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <!-- 左侧区域 -->
        <el-col :span="16">
          <div class="left-card" v-if="search">
            <articlecard :articles="articles" v-if="articles.length > 0" />
            <span v-if="articles.length === 0" class="neon-text"> 该用户未发布动态 </span>
          </div>
          <div class="no-result" v-if="!search">
            <h1 class="neon-text">没有找到相关动态</h1>
          </div>
        </el-col>
        <!-- 右侧区域 -->
        <el-col :span="8">
          <el-card class="right-card">
            <!-- 显示热门文章 -->
            <div class="right-content">
              <h3>热门文章</h3>
              <ul>
                <li v-for="hotArticle in searchHot" :key="hotArticle.id">
                  <router-link :to="{ path: '/articleinfo', query: { id: hotArticle.id } }">
                    {{ hotArticle.title }}
                  </router-link>
                </li>
              </ul>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import HeaderComponent from "../components/HeaderComponent.vue";
import articlecard from "../components/articlecard.vue";
import { useRoute, useRouter } from "vue-router";
import api from "../utils/index";
import { ElMessage } from "element-plus";
import { ref, onMounted, watch } from "vue";

// 初始化路由和响应式数据
const router = useRouter();
const route = useRoute();
const articles = ref([]);
const searchHot = ref([]);
const search = ref(true);
const searchQuery = ref("");

// 定义获取文章列表的函数
const getArticleList = async () => {
  try {
    const searchResponse = await api.get(`/articles`);
    const searchParams = route.query.q;
    const result = searchParams
      ? searchResponse.data.filter((item) => item.content && item.content.includes(searchParams))
      : searchResponse.data;
    if (result.length === 0) {
      search.value = false;
    } else {
      articles.value = result;
    }
  } catch (error) {
    ElMessage.error("获取数据失败: " + error.message);
  }
};

// 定义处理搜索的函数
const handleSearch = (event) => {
  const keyword = event.target.value.trim();
  if (keyword) {
    router.push({ path: "/search", query: { q: keyword } });
  } else {
    router.push({ path: "/search" });
  }
};

// 定义获取热门文章的函数
const fetchArticles = async () => {
  try {
    const response = await api.get("/articles?_limit=10");
    searchHot.value = response.data.map((article) => ({
      id: article.id,
      title: article.content.substring(0, 16) + "...",
    }));
  } catch (error) {
    console.error("获取文章失败:", error);
  }
};

// 监听路由参数变化
watch(
  () => route.query.q,
  () => {
    window.location.reload();
  },
  { deep: true }
);

// 组件挂载时执行的逻辑
onMounted(() => {
  getArticleList();
  fetchArticles();
});
</script>

<style scoped>
/* 整体布局样式 */
.main {
  background-color: #f2f4f7;
  min-height: 100vh;
  padding: 20px;
}

.main-contan {
  max-width: 1000px;
  margin: 0 auto;
}

/* 搜索框样式 */
.search-box input {
  margin-bottom: 20px;
  width: 100%;
  height: 40px;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  text-indent: 12px;
  background-color: #fff;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s ease;
}

/* 左侧区域样式 */
.left-card,
.right-card {
  margin-bottom: 20px;
  border-radius: 12px;
}

.no-result {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 60px);
}

.neon-text {
  font-size: 48px;
  font-weight: bold;
  color: #acacac9e;
  display: block;
  text-align: center;
}

/* 右侧区域样式 */
.right-content h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 18px;
  color: #333;
}

.right-content ul {
  list-style-type: none;
  padding: 0;
}

.right-content li {
  margin-bottom: 8px;
}

.right-content a {
  color: #2196f3;
  text-decoration: none;
  transition: color 0.3s ease;
}

.right-content a:hover {
  color: #1976d2;
  text-decoration: underline;
}

/* 其他样式（保留但整理重复部分） */
.main-content {
  padding: 0 !important;
  max-width: 1000px;
  margin: 0 auto;
  background-color: #f5f7fa;
  padding: 20px 100px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.right-buttons {
  display: flex;
  align-items: end;
}

.edit-profile-btn {
  margin-right: 10px;
}

.post-card,
.post-show-card {
  margin-bottom: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.post-card:hover,
.post-show-card:hover {
  transform: translateY(-2px);
}

.post-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.username {
  margin-left: 15px;
}

.time {
  color: #999;
  font-size: 12px;
  margin-left: 10px;
}

.post-input {
  width: 100%;
  margin-bottom: 5px;
}

.search-input:focus {
  outline: none;
  border-color: #409eff;
}

.post-content {
  text-align: left;
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.6;
  color: #1c1e21;
}

.post-image {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
}

.post-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #e4e6eb;
  color: #65676b;
  font-size: 14px;
}

.post-actions {
  display: flex;
  justify-content: space-around;
  padding: 8px 0;
}

.post-actions .el-button {
  flex: 1;
  padding: 8px;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.post-actions .el-button:hover {
  background-color: #f0f2f5;
}

.right-section {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.section-icon {
  margin-right: 5px;
  color: #909399;
}

.edit-details-btn,
.add-featured-btn {
  width: 100%;
  margin-top: 10px;
  background-color: #e4e7ed;
  border-radius: 5px;
  padding: 5px 10px;
}
</style>
